<!-- 计算器页面 -->
<template>
	<view class="calculator-box">
		<view class="record-box">
			<!-- 顶部的记录 -->
			<scroll-view class="record" :scroll-y="true" :scroll-top="scrollTop > 0 ? scrollTop : 0">
				<view class="item" v-for="(item, index) in recordDataList" :key="index">{{item}}</view>
			</scroll-view>
			<!-- 清除 按钮 -->
			<view class="clear-btn" :throttle-time="throttleTime" @click="modalShow = true" v-if="recordDataList.length">清空记录</view>
			<!-- 底部的显示输入的数字区域 -->
			<view class="show-number-box">{{inputValue}}</view>
		</view>
		<!-- 底部的按键 -->
		<view class="operation-box">
			<!-- 第一行 -->
			<view class="item-box">
				<u-button :custom-style="btnStyle" :hair-line="false"  :throttle-time="throttleTime" @click="clearClick">C</u-button>
			</view>
			<view class="item-box">
				<u-button :custom-style="btnStyle" :hair-line="false" :throttle-time="throttleTime" @click="divisionBtnClick">÷</u-button>
			</view>
			<view class="item-box">
				<u-button :custom-style="btnStyle" :hair-line="false" :throttle-time="throttleTime" @click="mulBtnClick">×</u-button>
			</view>
			<view class="item-box">
				<u-button :custom-style="btnStyle" :hair-line="false" :throttle-time="throttleTime" @click="deleClick">←</u-button>
			</view>
			<!-- 第二行 -->
			<view class="item-box">
				<u-button :custom-style="numberBtnStyle" :hair-line="false" :throttle-time="throttleTime" @click="btnClick(7)">7</u-button>
			</view>
			<view class="item-box">
				<u-button :custom-style="numberBtnStyle" :hair-line="false" :throttle-time="throttleTime" @click="btnClick(8)">8</u-button>
			</view>
			<view class="item-box">
				<u-button :custom-style="numberBtnStyle" :hair-line="false" :throttle-time="throttleTime" @click="btnClick(9)">9</u-button>
			</view>
			<view class="item-box">
				<u-button :custom-style="btnStyle" :hair-line="false" :throttle-time="throttleTime" @click="subBtnClick">-</u-button>
			</view>
			<!-- 第三行 -->
			<view class="item-box">
				<u-button :custom-style="numberBtnStyle" :hair-line="false" :throttle-time="throttleTime" @click="btnClick(4)">4</u-button>
			</view>
			<view class="item-box">
				<u-button :custom-style="numberBtnStyle" :hair-line="false" :throttle-time="throttleTime" @click="btnClick(5)">5</u-button>
			</view>
			<view class="item-box">
				<u-button :custom-style="numberBtnStyle" :hair-line="false" :throttle-time="throttleTime" @click="btnClick(6)">6</u-button>
			</view>
			<view class="item-box">
				<u-button :custom-style="btnStyle" :hair-line="false" :throttle-time="throttleTime" @click="addBtnClick">+</u-button>
			</view>
			<!-- 第四行 -->
			<view class="item-box">
				<u-button :custom-style="numberBtnStyle" :hair-line="false" :throttle-time="throttleTime" @click="btnClick(1)">1</u-button>
			</view>
			<view class="item-box">
				<u-button :custom-style="numberBtnStyle" :hair-line="false" :throttle-time="throttleTime" @click="btnClick(2)">2</u-button>
			</view>
			<view class="item-box">
				<u-button :custom-style="numberBtnStyle" :hair-line="false" :throttle-time="throttleTime" @click="btnClick(3)">3</u-button>
			</view>
			<view class="item-box equal">
				<u-button :custom-style="equalBtnStyle" :hair-line="false" :throttle-time="throttleTime" @click="equalBtnClick">=</u-button>
			</view>
			<!-- 零 -->
			<view class="item-box null">
				<u-button :custom-style="nullBtnStyle" :hair-line="false" :throttle-time="throttleTime" @click="btnClick(0)">0</u-button>
			</view>
			<!-- 点 -->
			<view class="item-box spot">
				<u-button :custom-style="numberBtnStyle" :hair-line="false" :throttle-time="throttleTime" @click="btnClick('.')">.</u-button>
			</view>
		</view>
		
		<!-- 清空算式板时的提示模态框 -->
		<u-modal v-model="modalShow" content="是否确认清空算式板记录？" :show-cancel-button="true" @confirm="clearBtnClick"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue: '',
				// 存储计算记录(每次按 = 号便会生成一次记录)
				recordDataList: [],
				modalShow: false,
				scrollTop: 0,
				// 保留小数点后的位数
				len: 0,
				// 按钮节流的间隔时间
				throttleTime: 0,
				// 按钮样式
				btnStyle: {
					border: '1px solid #000000',
					width: '187.5rpx',
					height: '150rpx',
					borderRadius: 0,
					backgroundColor: '#d5d5d5',
					fontSize: '62rpx',
					fontFamily: 'PingFang SC',
					fontWeight: 500,
					color: '#141418'
				},
				// 等于按钮
				equalBtnStyle: {
					width: '187.5rpx',
					height: '300rpx',
					border: '1px solid #000000',
					borderRadius: 0,
					backgroundColor: '#d5d5d5',
					fontSize: '62rpx',
					fontFamily: 'PingFang SC',
					fontWeight: 500,
					color: '#141418'
				},
				// 数字按钮
				numberBtnStyle: {
					border: '1px solid #000000',
					width: '187.5rpx',
					height: '150rpx',
					borderRadius: 0,
					backgroundColor: '#FFFFFF',
					fontSize: '62rpx',
					fontFamily: 'PingFang SC',
					fontWeight: 500,
					color: '#141418'
				},
				// 数字 0
				nullBtnStyle: {
					border: '1px solid #000000',
					width: '375rpx',
					height: '150rpx',
					borderRadius: 0,
					backgroundColor: '#FFFFFF',
					fontSize: '62rpx',
					fontFamily: 'PingFang SC',
					fontWeight: 500,
					color: '#141418'
				}
			};
		},
		onLoad() {
			this.recordDataList = this.vuex_calculatorRecord
			this.getScrollToBottom()
		},
		methods: {
			// 将滚动条置底
			getScrollToBottom() {
				this.scrollTop = this.recordDataList.length * 31		// 每条记录 高 31px
				uni.pageScrollTo({
				    scrollTop: this.scrollTop - 230,
				    // duration: 300	// 滚动动画的时长，默认300ms，单位 ms
				});
			},
			// 数字键的点击事件
			btnClick(number) {
				if(this.isJudgeEqual()) {
					this.inputValue = ''
				}
				if(this.inputValue === 0) {
					this.inputValue = ''
				}
				// 判断是否是点击的 . (防止点击多次小数点的问题)
				if(number === '.') {
					console.log('.');
					// 找到最后 一个 . 的下标
					let index = this.inputValue.lastIndexOf('.')
					let str = this.inputValue.slice(index + 1, this.inputValue.length)
					if(
						index === -1 ||
						str.indexOf('+') !== -1 || 
						str.indexOf('-') !== -1 || 
						str.indexOf('×') !== -1 || 
						str.indexOf('÷') !== -1
					) {
						if(!this.inputValue) {
							return this.inputValue = '0' + number
						}
						return this.inputValue += number
					}
					
				} else {
					// console.log(number)
					this.inputValue += number
				}
			},
			// 判断 this.inputValue 中是否包含了 = 号
			isJudgeEqual() {
				if(this.inputValue.toString().indexOf('=') != -1) {
					let arr = this.inputValue.split('=')
					this.inputValue = arr[1]
					
					return true
				}
				return false
			},
			// 判断一个小数的小数点位数
			resetThisLen(f_number) {
				let index = f_number.lastIndexOf('.')
				if(index !== -1) {
					let len2 = f_number.substring(index + 1, f_number.length).length
					return this.len =  this.len > len2 ? this.len : len2
				}
				// 如果传入的值没有小数点则 return 0
				return 0
			},
			// 判断用户是否输入了 小数点 以及输入了小数点后几位
			numberPoint() {
				// 先判断输入框中是否有 + - × ÷
				if(this.inputValue.toString().indexOf('+') !== -1) {
					let arr = this.inputValue.split('+')
					arr.forEach(number => {
						this.resetThisLen(number)
					})
					return console.log('加法，小数位数：' + this.len);
				} else if(this.inputValue.toString().indexOf('-') !== -1) {
					let arr = this.inputValue.split('-')
					arr.forEach(number => {
						this.resetThisLen(number)
					})
					return console.log('减法，小数位数：' + this.len);
				} else if(this.inputValue.toString().indexOf('×') !== -1) {
					let arr = this.inputValue.split('×')
					arr.forEach(number => {
						this.resetThisLen(number)
					})
					return console.log('乘法，小数位数：' + this.len);
				} else if(this.inputValue.toString().indexOf('÷') !== -1) {
					let arr = this.inputValue.split('÷')
					arr.forEach(number => {
						this.resetThisLen(number)
					})
					return console.log('除法，小数位数：' + this.len);
				}
				// 如果输入了小数点 .
				if(this.inputValue.toString().indexOf('.') != -1) {
					// len 便是小数点后的位数
					let len2 = this.inputValue.substring(this.inputValue.lastIndexOf('.') + 1, this.inputValue.length).length
					console.log(len2);
					
					this.len = this.len > len2 ? this.len : len2
					console.log('小数点后的位数为：' + this.len);
				}
			},
			// 加法
			addBtnClick() {
				this.numberPoint()
				this.isJudgeEqual()
				// 把用于显示的 除号和乘号 替换成支持运算的 / 和 *
				let str = this.inputValue.replace('÷', '/').replace('×', '*')
				if(str == 0) {
					return this.inputValue = 0 + '+'
				}
				console.log(str);
				this.inputValue = this.myEval(str) + '+'
				
			},
			// 减法
			subBtnClick() {
				this.numberPoint()
				this.isJudgeEqual()
				// 把用于显示的 除号和乘号 替换成支持运算的 / 和 *
				let str = this.inputValue.replace('÷', '/').replace('×', '*')
				if(str == 0) {
					return this.inputValue = 0 + '-'
				}
				this.inputValue = this.myEval(str) + '-'
				
			},
			// 除法 ÷
			divisionBtnClick() {
				this.numberPoint()
				this.isJudgeEqual()
				// 把用于显示的 除号和乘号 替换成支持运算的 / 和 *
				let str = this.inputValue.replace('÷', '/').replace('×', '*')
				if(str == 0) {
					return this.inputValue = 0 + '÷'
				}
				this.inputValue = this.myEval(str) + '÷'
				
			},
			// 乘法 ×
			mulBtnClick() {
				this.numberPoint()
				this.isJudgeEqual()
				// 把用于显示的 除号和乘号 替换成支持运算的 / 和 *
				let str = this.inputValue.replace('÷', '/').replace('×', '*')
				if(str == 0) {
					return this.inputValue = 0 + '×'
				}
				this.inputValue = this.myEval(str) + '×'
				
			},
			// 等于
			equalBtnClick() {
				// 截取出输入框中的最后一位字符判断是否是 + - × ÷ 这四个符号之一
				let inputValueEnd = this.inputValue.substr(this.inputValue.length - 1, 1)
				if(inputValueEnd === '+' || inputValueEnd === '-' || inputValueEnd === '÷' || inputValueEnd === '×') return this.inputValue = this.inputValue.replace(this.inputValue.length, '')
				this.numberPoint()
				this.isJudgeEqual()
				// 把用于显示的 除号和乘号 替换成支持运算的 / 和 *
				let str = this.inputValue.toString().replace('÷', '/').replace('×', '*')
				this.inputValue = this.inputValue + '=' + this.myEval(str)
				this.len = 0
				
				this.recordDataList.push(this.inputValue)
				
				// 用此页面中最新的历史记录数组替换存储在 vuex 中的旧记录数组
				this.$u.vuex('vuex_calculatorRecord', this.recordDataList)
				
				// 置底滚动区滚动条
				this.getScrollToBottom()
				
				
			},
			// 退格按钮的点击事件
			deleClick() {
				// 如果包含了 = 号，则退格键相当于清除
				if(this.isJudgeEqual()) {
					return this.clearClick()
				}
				if(this.inputValue == 0) return this.inputValue = 0
				this.inputValue = this.inputValue.substring(0, this.inputValue.length - 1)
			},
			// C 键(清除键)的点击事件
			clearClick() {
				this.inputValue = 0
				this.len = 0
			},
			
			// 清空历史记录模态框的确认事件
			clearBtnClick() {
				this.recordDataList = []
				// 用此页面中最新的历史记录数组替换存储在 vuex 中的旧记录数组
				this.$u.vuex('vuex_calculatorRecord', [])
				this.inputValue = 0
			},
			
			// 自己封装的仿JS的 eval 函数(因为微信小程序不支持原eval函数)
			myEval(str) {
				let number = 0
				if(str.indexOf('+') !== -1) {
					let arr = str.split('+')
					number = parseFloat(arr[0]) + parseFloat(arr[1])
				} else if(str.indexOf('-') !== -1) {
					let arr = str.split('-')
					number = parseFloat(arr[0]) - parseFloat(arr[1])
				} else if(str.indexOf('/') !== -1) {
					let arr = str.split('/')
					number = parseFloat(arr[0]) / parseFloat(arr[1])
				} else if(str.indexOf('*') !== -1) {
					let arr = str.split('*')
					number = parseFloat(arr[0]) * parseFloat(arr[1])
				} else {
					return parseFloat(parseFloat(str).toFixed(this.len))
				}
				console.log(number, this.len);
				return parseFloat(parseFloat(number).toFixed(this.len))
			}
			
		}
		
	}
</script>

<style lang="scss" scoped>
	.calculator-box {
		width: 750rpx;
		height: 100vh;
		background-color: black;
		color: white;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		.record-box {
			height: calc(100vh - 750rpx);
			font-size: 42rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: white;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			.record {
				width: 100%;
				height: calc(100% - 90rpx);
				text-align: right;
				.item {
					padding: 5rpx 20rpx;
				}
			}
			.clear-btn {
				font-size: 28rpx;
				position: absolute;
				bottom: 100rpx;
				left: 20rpx;
			}
			.show-number-box {
				height: 90rpx;
				line-height: 90rpx;
				text-align: right;
				background-color: #212121;
				padding: 0 20rpx;
			}
		}
		.operation-box {
			width: 750rpx;
			height: 750rpx;
			// background-color: $u-bg-color;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			position: relative;
			overflow: hidden;
			font-size: 62rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #141418;
			.item-box {
				background-color: white;
				border: 1px solid #000000;
				width: 25%;
				height: 20%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.equal {
				height: 300rpx;
			}
			.null {
				width: 50%;
				height: 20%;
				position: absolute;
				bottom: 0rpx;
				left: 0;
				border-top: 2px solid #000000;
				// border: 1px solid #000000;
			}
			.spot {
				width: 25%;
				height: 20%;
				position: absolute;
				bottom: 0rpx;
				left: 50%;
				border-top: 2px solid #000000;
				// border: 1px solid #000000;
			}
			
		}
	}
</style>
